﻿@page "/components/skeleton"

<DocsPage>
    <DocsPageHeader Title="Skeleton" SubTitle="Display placerholder for your content while the data loads." />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Variants</Title>
                <Description>The component can take the shape of 3 different variants.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <SkeletonVariantsExample />
            </SectionContent>
            <SectionSource Code="SkeletonVariantsExample" GitHubFolderName="Skeleton"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Animations</Title>
                <Description>The default animation is puls but you can disable it or change to wave.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <SkeletonAnimationsExample />
            </SectionContent>
            <SectionSource Code="SkeletonAnimationsExample" GitHubFolderName="Skeleton"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Pulsate Example</Title>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <SkeletonPulsateExample />
            </SectionContent>
            <SectionSource Code="SkeletonPulsateExample" GitHubFolderName="Skeleton" ShowCode="false"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Wave Example</Title>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <SkeletonWaveExample />
            </SectionContent>
            <SectionSource Code="SkeletonWaveExample" GitHubFolderName="Skeleton" ShowCode="false"  />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>